<template>
  <basic-container>
    <div class="notification-channel">
      <div class="channel-list">
        <template v-for="item in configList">
          <div class="channel-item" :class="{'disabled':item.enableFlag===0,'selection':item.oid===selectId}"
               @click.stop.prevent="clickConfigItem('view',item)">
            <span>
              <span class="channel-item-flag"></span>
              <span>
                {{ item.sendChannel === 1 ? '站内信' : '邮箱' }}（{{ item.name }}）
              </span>
            </span>
            <div>
              <el-button type="text" icon="el-icon-edit-outline" title="编辑"
                         @click.prevent.stop="clickConfigItem('edit',item)"></el-button>
              <el-button type="text" icon="el-icon-delete" title="删除"
                         @click.prevent.stop="clickConfigItem('delete',item)"></el-button>
            </div>
          </div>
        </template>

        <div class="channel-item-add">
          <el-button icon="el-icon-plus"
                     type="text"
                     @click="clickConfigItem('add')">
            添加
          </el-button>
        </div>
      </div>
      <div class="channel-details">
        <div class="c-d-header">
          <el-button size="medium" type="primary" :disabled="['view','delete'].includes(clickType)" @click="saveForm">
            保存
          </el-button>
        </div>
        <div class="c-d-con">
          <el-form :model="formData"
                   :rules="rules"
                   :disabled="['view','delete'].includes(clickType)"
                   ref="form"
                   label-width="120px"
                   size="small">
            <el-collapse v-model="active">
              <el-collapse-item title="基本配置" :name="1">
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="启用">
                      <el-switch :active-value="1"
                                 :inactive-value="0"
                                 v-model="formData.enableFlag">
                      </el-switch>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="渠道名称" prop="name">
                      <el-input v-model="formData.name"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="渠道类型">
                      <el-select style="width: 100%;" v-model="formData.sendChannel">
                        <el-option label="邮箱" :value="2"></el-option>
                        <el-option label="站内信" :value="1"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-collapse-item>
              <el-collapse-item title="账号配置" :name="2">
                <div v-show="formData.sendChannel===1">
                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="显示位置">
                        <el-radio-group v-model="formData.accountConfig.position">
                          <el-radio :label="0">全部</el-radio>
                          <el-radio :label="1">顶部</el-radio>
                          <el-radio :label="2">待办栏</el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div>
                <div v-show="formData.sendChannel!==1">
                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="smtp(地址)" prop="accountConfig.host">
                        <el-input v-model="formData.accountConfig.host"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="smtp(端口)" prop="accountConfig.port">
                        <el-input v-model="formData.accountConfig.port"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="邮箱账号" prop="accountConfig.username">
                        <el-input v-model="formData.accountConfig.username"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="4">
                      <el-form-item label="邮箱 授权码/密码">
                        <el-select size="small" v-model="formData.accountConfig.passwordType">
                          <el-option label="密码" :value="1"></el-option>
                          <el-option label="授权码" :value="2"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="4">
                      <el-form-item label-width="0" prop="accountConfig.password">
                        <el-input v-model="formData.accountConfig.password"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div>
              </el-collapse-item>
            </el-collapse>
          </el-form>
        </div>
      </div>
    </div>
  </basic-container>
</template>

<script>
import * as channel from "@/api/notification/channel"

export default {
  name: "notificationChannel",
  data() {
    return {
      active: [1, 2],
      formData: {
        name: "",
        sendChannel: 1,
        enableFlag: "1",
        accountConfig: {
          position: 0,

          passwordType: 1,
          username: "",
          password: "",
          host: "",
          port: "",
        }
      },
      rules_base: {
        name: [{required: true, message: "请输入编码", trigger: "blur"}],
      },
      rules_: {
        "accountConfig.username": [{required: true, message: "请输入邮箱账号", trigger: "blur"}],
        "accountConfig.password": [{required: true, message: "请输入授权码/密码", trigger: "blur"}],
        "accountConfig.host": [{required: true, message: "请输入smtp(地址)", trigger: "blur"}],
        "accountConfig.port": [{required: true, message: "请输入smtp(端口)", trigger: "blur"}],
      },

      configList: [],

      clickType: "view",
      selectId: ""
    }
  },
  computed: {
    rules() {
      // this.$nextTick(() => {
      //   this.$refs["form"].clearValidate();
      // })
      if (this.formData.sendChannel === 1) {
        return {...this.rules_base}
      }
      return {...this.rules_base, ...this.rules_}
    }
  },
  methods: {
    clickConfigItem(type, item) {
      if (type === "delete") {
        this.$confirm("是否删除").then(() => {
          this.clickType = type;
          channel.del({oid: item.oid}).then(() => {
            this.$message.success("删除成功");
            this.getList();
          })
        })
      }
      if (['edit', 'view'].includes(type)) {
        this.clickType = type;
        let form = this.deepCopy(item);
        form.accountConfig = JSON.parse(form.accountConfig);
        Object.assign(this.formData, form);
        this.selectId = item.oid;
      }
      if (type === "add") {
        this.clickType = type;
        this.formData = {
          name: "",
          sendChannel: 1,
          enableFlag: "1",
          accountConfig: {
            position: 0,

            passwordType: 1,
            username: "",
            password: "",
            host: "",
            port: "",
          }
        }
      }
      this.$nextTick(() => {
        this.$refs["form"].clearValidate();
      })
    },
    getList() {
      channel.list().then(res => {
        this.configList = res.data.data;
        if (res.data.data.length > 0) {
          let item = res.data.data[0]
          this.selectId = item.oid;
          let form = this.deepCopy(item);
          form.accountConfig = JSON.parse(form.accountConfig);
          Object.assign(this.formData, form);
        }
      })
    },
    saveForm() {
      let form = this.deepCopy(this.formData);
      form.accountConfig = JSON.stringify(form.accountConfig)
      this.$refs["form"].validate(f => {
        if (f) {
          let method = this.clickType === "add" ? "add" : "update";
          channel[method](form).then(() => {
            this.$message.success("保存成功");
            this.getList();
          })
        }
      })
    }
  },
  mounted() {
    this.getList();
  }
}
</script>

<style scoped lang="scss">
.notification-channel {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: nowrap;

  $cL: 300px;

  .channel-list {
    width: $cL;
    height: 100%;
    border: 1px solid #f2f2f2;
    overflow-y: auto;

    .channel-item {
      padding: 15px 10px 15px 20px;
      border-bottom: 1px solid #f2f2f2;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      flex-wrap: nowrap;
      font-size: 12px;
      cursor: pointer;

      .el-button {
        padding: 0;
      }

      .channel-item-flag {
        display: inline-block;
        width: 11px;
        height: 11px;
        border-radius: 100%;
        background: #67C23A;
        margin-right: 3px;
      }
    }

    .disabled {
      .channel-item-flag {
        background: rgba(245, 108, 108, 0.5);
      }

      > span {
        color: rgba(48, 49, 51, 0.5);
      }
    }

    .selection {
      background: #f0f2f5;
    }

    .channel-item-add {
      text-align: center;
      margin-top: 10px;

      .el-button {
        font-size: 16px;
      }
    }
  }

  .channel-details {
    width: calc(100% - #{$cL} - 20px);
    height: 100%;

    .c-d-header {
      margin-bottom: 20px;
    }

    .c-d-con {
    }
  }
}
</style>
